import React, { Component } from 'react'
import { Button, Card, Icon, Radio } from 'antd'
import './style.less'

const ButtonGroup = Button.Group
const RadioGroup = Radio.Group

class Buttons extends Component {

    constructor(props) {
        super(props)
        this.state = {
            loading: false,
            size: 'default'
        }
    }

    handleSubmit = () => {
        this.setState({
            loading: true
        })
    }

    handleChange = (e) => {
        this.setState({
            size: e.target.value
        })
    }

    render() {
        const { loading, size } = this.state
        return (
            <div className="button-wrap">
                <Card title="基础按钮" className="card-item">
                    <Button type="primary">按钮</Button>
                    <Button>海洋</Button>
                    <Button type="dashed">海洋</Button>
                    <Button type="danger">海洋</Button>
                    <Button disabled>海洋</Button>
                </Card>
                <Card title="图形按钮" className="card-item">
                    <Button type="primary" icon="plus">按钮</Button>
                    <Button type="primary" icon="edit">编辑</Button>
                    <Button type="danger" icon="delete">删除</Button>
                </Card>
                <Card title="Loading按钮" className="card-item">
                    <Button type="primary" onClick={this.handleSubmit} loading={loading}>确定</Button>
                    <Button type="primary" shape="circle" loading />
                </Card>
                <Card title="按钮组" >
                    <ButtonGroup>
                        <Button type="primary"><Icon type="left"/>返回</Button>
                        <Button type="primary">前进<Icon type="right" /></Button>
                    </ButtonGroup>
                </Card>
                <Card title="按钮尺寸" className="card-item">
                    <RadioGroup defaultValue={size} onChange={this.handleChange}>
                        <Radio value="small">小</Radio>
                        <Radio value="default">中</Radio>
                        <Radio value="large">大</Radio>
                    </RadioGroup>
                    <Button type="primary" size={size}>按钮</Button>
                    <Button size={size}>按钮</Button>
                    <Button type="dashed" size={size}>按钮</Button>
                    <Button type="danger" size={size}>按钮</Button>
                </Card>
            </div>
        )
    }
}

export default Buttons